<template>
  <div class="app-container  bg-gray">
    <!--<div class="title">欢迎使用<br><br>云运维系统</div>-->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="max-width: 600px;">
        <el-card class="box-1" style="height: 275px;">
          <div class="flex-row">
            <el-avatar :src="userInfo.avatar" :size="98"/>
            <div class="info-box">
              <div class="info-item">
                <span class="value name">{{ userInfo.name + '（' + userInfo.email + '）' }}</span>
              </div>
              <div class="info-item">
                <span class="label">入职时间</span>
                <span class="value">{{ userInfo.hiredate }}</span>
              </div>
              <div class="info-item">
                <span class="label">所属团队</span>
                <span class="value">{{ userInfo.company_name }}</span>
              </div>
              <div class="info-item">
                <span class="label">使用权限</span>
                <span class="value">{{ userInfo.roleName }}</span>
              </div>
              <div class="info-item">
                <span class="label">职位</span>
                <span class="value">{{ userInfo.position }}</span>
              </div>
              <div class="info-item">
                <span class="label">等级</span>
                <span class="value">{{ userInfo.grade }}</span>
              </div>
              <div class="info-item">
                <span class="label">工号</span>
                <span class="value">{{ userInfo.job_number }}</span>
              </div>
              <router-link to="/personnel/personalInformation">
                <el-button type="primary" size="small" style="float: right;">详细</el-button>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="max-width: 600px;">
        <el-card class="box-1" style="height: 275px;">
          <div class="info-box">
            <div class="info-item">
              <span class="label">当月业绩</span>
              <span class="value">{{ info['totalbalance'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">上月业绩</span>
              <span class="value">{{ info['recharge'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">我的客户</span>
              <span class="value">{{ info['total_customer'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">逾期客户</span>
              <span class="value">{{ info['customer_over'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">TOP.1业绩</span>
              <span class="value">{{ info['achievement']&&info['achievement'].name?info['achievement'].name + '：' + info['achievement'].total_money : '暂无数据' }}</span>
            </div>
            <div class="info-item">
              <span class="label">我的总业绩</span>
              <span class="value">{{ info['achievement_money'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">上次登录时间</span>
              <span class="value">{{ userInfo['last_login_time'] }}</span>
            </div>
            <div class="info-item">
              <span class="label">登录方式</span>
              <span class="value">{{ userInfo.loginMode }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="9" style="max-width: 480px;">
        <el-card class="box-1" style="min-height: 254px;">
          <div slot="header" class="flex-row">
            <span>最新资讯</span>
            <div class="text-right cursor-p" @click="newsClick">查看更多</div>
          </div>
          <el-table :data="info.news" :show-header="false" row-class-name="cursor-p" style="width: 100%;"
                    @cell-click="newsClick">
            <el-table-column prop="created_at" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.created_at, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="title" min-width="260"/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="9" style="max-width: 480px;">
        <el-card class="box-1" style="min-height: 254px;">
          <div slot="header" class="flex-row">
            <span>最新公告</span>
            <div class="text-right cursor-p" @click="logsClick">查看更多</div>
          </div>
          <el-table :data="info.articles" :show-header="false" row-class-name="cursor-p" style="width: 100%;"
                    @cell-click="logsClick">
            <el-table-column prop="created_at" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row['created_at'], '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="title" min-width="260"/>
          </el-table>
        </el-card>
      </el-col>
      <el-col style="width: 240px;">
        <el-card class="wxapp-img-box">
          <div slot="header">
            <span>小程序二维码</span>
          </div>
          <div class="wxapp-item">
            <el-image :src="info['member_wechat_qr']" :preview-src-list="[info.member_wechat_qr]" style="width: 150px; height: 150px;line-height: 150px;">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"/>
              </div>
            </el-image>
          </div>
        </el-card>
      </el-col>
      <!--<el-col style="width: 240px;">
        <el-card class="wxapp-img-box">
          <div slot="header">
            <span>系统安装包</span>
          </div>
          <div class="wxapp-item" style="height: 154px;">
            <el-image :src="zipImage" style="width: 100px;height: 100px;">
              <div slot="error">
                <i class="el-icon-picture-outline"/>
              </div>
            </el-image>
            <el-button type="success" class="bg-green" size="small" style="margin-top: 10px;">点击下载</el-button>
          </div>
        </el-card>
      </el-col>-->
    </el-row>

    <el-card v-for="(item,index) in branchMemberList" :key="index" class="box-1" style="max-width: 1180px;">
      <div slot="header" class="flex-row">
        <span>{{ item.branch_name }}</span>
      </div>
      <el-row class="box-2">
        <p v-if="branchMemberList.length===0">一个人的战斗~</p>
        <el-col v-for="(item2, index) in item.userList" :key="index" :xs="4" :sm="3" :md="3" :lg="2" :xl="2" :gutter="20" style="text-align:center;">
          <el-avatar :src="item2['wechat_pic']?(item2['wechat_pic'].indexOf('http')>=0?item2['wechat_pic']:imageUrl+item2['wechat_pic']):'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" :size="60"/>
          <h1>{{ item2.name }}</h1>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { parseTime } from '@/utils/table';
  import zipImage from '@/assets/zip.png';
  export default {
    data() {
      return {
        // 安装包图标
        zipImage: zipImage,
        // 信息
        info: {
          member_wechat_qr: ''
        },
        // 团队列表
        branchMemberList: []
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    watch: {},
    created() {
      this.getData();
    },
    methods: {
      parseTime,
      getData(order) {
        order || (order = {});
        const url = 'index/index';
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.info = res.data;
          this.getMember();
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },

      // 获取团队成员
      getMember() {
        const url = 'index/userBranchList';
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.branchMemberList = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },

      // 新闻点击
      newsClick(row) {
        if (row.id){
          this.$router.push({
            path: '/information/list/info',
            query: { id: row.id }
          })
        } else {
          this.$router.push({
            path: '/information/list'
          })
        }
      },
      // 日志点击
      logsClick() {
        this.$router.push({
          path: '/information/update_log_detail'
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../styles/index.scss';
  .flex-row {
    @include flex-row(center, space-between);
  }

  .box-1{
    margin-bottom: 20px;
    .flex-row {
      @include flex-row(start, flex-between);
    }
  }

  .info-box{
    flex: 1;
    margin-left: 20px;
    .info-item{
      @include flex-row(center, flex-start);
      padding: 5px 0;
      .label{
        width: 120px;
      }
      .label.name{
        font-size: 22px;
        padding-bottom: 10px;
      }
      .value{
        flex: 1;
      }
      .value.name{
        font-size: 22px;
        padding-bottom: 10px;
      }
    }
  }

  .wxapp-img-box{
    margin-bottom: 20px;
    .wxapp-item {
      text-align: center;
    }
  }

  .el-card__body {
    padding: 10px;
  }

  .box-2 {
    >p{
      font-size: 16px;
      color: $textGray;
      text-align: center;
    }
    margin: 0 auto;
    padding-top: 10px;
    h1 {
      color: $text43;
      font-size: 15px;
      font-weight: normal;
      @extend .text-center;
      padding-bottom: 12px;
    }
  }

</style>
